<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<!-- 筛选是否压缩 -->
			<cl-filter label="是否压缩">
				<cl-select prop="isZip" :options="options.isZip" />
			</cl-filter>
			<!-- 筛选屏幕方向 -->
			<cl-filter label="屏幕方向">
				<cl-select prop="screenOrientation" :options="options.screenOrientation" />
			</cl-filter>
			<!-- 筛选状态 -->
			<cl-filter label="状态">
				<cl-select prop="status" :options="options.status" />
			</cl-filter>
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key
				placeholder="搜索名称、备注、URL、图标、主题颜色、背景颜色、标签页、归因到、上报周期"
			/>
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>

<script lang="ts" name="helper-info" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { reactive } from "vue";

const { service } = useCool();

// 选项
const options = reactive({
	isZip: [
		{ label: "否", value: 0, type: "danger" },
		{ label: "是", value: 1, type: "success" }
	],
	screenOrientation: [
		{ label: "纵向", value: 0, type: "danger" },
		{ label: "横向", value: 1, type: "success" }
	],
	status: [
		{ label: "未部署", value: 0 },
		{ label: "部署中", value: 1 },
		{ label: "已部署", value: 2 },
		{ label: "部署失败", value: 3 }
	]
});

// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: "用户ID",
			prop: "userId",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "名称",
			prop: "name",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "备注",
			prop: "remark",
			component: { name: "el-input", props: { type: "textarea", rows: 4 } }
		},
		{
			label: "是否压缩",
			prop: "isZip",
			component: { name: "el-radio-group", options: options.isZip },
			value: 0,
			required: true
		},
		{
			label: "URL",
			prop: "url",
			component: { name: "el-input", props: { clearable: true } }
		},
		{ label: "图标", prop: "icon", component: { name: "cl-upload" } },
		{ label: "配置", prop: "config", component: { name: "cl-editor-wang" } },
		{
			label: "主题颜色",
			prop: "themeColor",
			component: { name: "el-input", props: { clearable: true } }
		},
		{
			label: "背景颜色",
			prop: "bgColor",
			component: { name: "el-input", props: { clearable: true } }
		},
		{
			label: "标签页",
			prop: "tab",
			component: { name: "el-input", props: { clearable: true } }
		},
		{
			label: "屏幕方向",
			prop: "screenOrientation",
			component: { name: "el-radio-group", options: options.screenOrientation },
			value: 0,
			required: true
		},
		{
			label: "是否全屏",
			prop: "fullScreen",
			flex: false,
			component: { name: "cl-switch" },
			required: true
		},
		{
			label: "是否需要预加载",
			prop: "needPreload",
			flex: false,
			component: { name: "cl-switch" },
			required: true
		},
		{
			label: "首次操作上报",
			prop: "firstActionReport",
			flex: false,
			component: { name: "cl-switch" },
			required: true
		},
		{
			label: "归因到",
			prop: "imputeTo",
			component: { name: "el-input", props: { clearable: true } }
		},
		{
			label: "上报周期",
			prop: "reportCycle",
			component: { name: "el-input", props: { clearable: true } }
		},
		{
			label: "状态",
			prop: "status",
			component: { name: "el-radio-group", options: options.status },
			value: 0,
			required: true
		},
		{
			label: "是否隐藏",
			prop: "hide",
			flex: false,
			component: { name: "cl-switch" },
			required: true
		}
	]
});

// cl-table
const Table = useTable({
	columns: [
		{ type: "selection" },
		{ label: "用户ID", prop: "userId", minWidth: 140 },
		{ label: "名称", prop: "name", minWidth: 140 },
		{ label: "备注", prop: "remark", showOverflowTooltip: true, minWidth: 200 },
		{ label: "是否压缩", prop: "isZip", dict: options.isZip, minWidth: 120 },
		{ label: "URL", prop: "url", minWidth: 140 },
		{
			label: "图标",
			prop: "icon",
			minWidth: 100,
			component: { name: "cl-image", props: { size: 60 } }
		},
		{
			label: "配置",
			prop: "config",
			minWidth: 120,
			component: { name: "cl-editor-preview", props: { name: "wang" } }
		},
		{ label: "主题颜色", prop: "themeColor", minWidth: 140 },
		{ label: "背景颜色", prop: "bgColor", minWidth: 140 },
		{ label: "标签页", prop: "tab", minWidth: 140 },
		{
			label: "屏幕方向",
			prop: "screenOrientation",
			dict: options.screenOrientation,
			minWidth: 120
		},
		{
			label: "是否全屏",
			prop: "fullScreen",
			minWidth: 100,
			component: { name: "cl-switch" }
		},
		{
			label: "是否需要预加载",
			prop: "needPreload",
			minWidth: 100,
			component: { name: "cl-switch" }
		},
		{
			label: "首次操作上报",
			prop: "firstActionReport",
			minWidth: 100,
			component: { name: "cl-switch" }
		},
		{ label: "归因到", prop: "imputeTo", minWidth: 140 },
		{ label: "上报周期", prop: "reportCycle", minWidth: 140 },
		{ label: "状态", prop: "status", dict: options.status, minWidth: 120 },
		{ label: "是否隐藏", prop: "hide", minWidth: 100, component: { name: "cl-switch" } },
		{
			label: "更新时间",
			prop: "updateTime",
			minWidth: 170,
			sortable: "custom",
			component: { name: "cl-date-text" }
		},
		{
			label: "创建时间",
			prop: "createTime",
			minWidth: 170,
			sortable: "desc",
			component: { name: "cl-date-text" }
		},
		{ type: "op", buttons: ["edit", "delete"] }
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.helper.info
	},
	(app) => {
		app.refresh();
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}
</script>
